<template>
  <div class="videomonitor">
    <!-- 视频监控 -->
    <div class="left">
      <Collapse accordion>
        <Panel v-for="(i, s) in initCarAndRoadValue" :key="s">
          {{ i.roadName }}
          <p
            style="padding: 10px 30px"
            slot="content"
            :class="value1 == j.id ? 'on' : ''"
            v-for="(j, k) in i.cars"
            :key="k"
            @click="selectClick(j)"
          >
            <span
              class="videoLeft"
              :style="{
                background:
                  j.devicesStatus == 0
                    ? 'red'
                    : j.devicesStatus == 1
                    ? 'orange'
                    : '#ccc',
              }"
            ></span>
            <span> {{ j.realCarNum }} </span>
          </p>
        </Panel>
      </Collapse>
    </div>
    <div class="right" v-if="bool">
      <Card class="rightbox">
        <p>前置摄像头</p>
        <video-player
          class="video-player vjs-custom-skin"
          ref="videoPlayer"
          :playsinline="true"
          :options="playerOptions3"
        ></video-player>
      </Card>
      <Card class="rightbox">
        <p>后置摄像头</p>
        <video-player
          class="video-player vjs-custom-skin"
          ref="videoPlayer"
          :playsinline="true"
          :options="playerOptions4"
        ></video-player>
      </Card>
      <Card class="rightbox">
        <p>左置摄像头</p>
        <video-player
          class="video-player vjs-custom-skin"
          ref="videoPlayer"
          :options="playerOptions"
        ></video-player>
      </Card>
      <Card class="rightbox">
        <p>右置摄像头</p>
        <video-player
          class="video-player vjs-custom-skin"
          ref="videoPlayer"
          :options="playerOptions2"
        ></video-player>
      </Card>
    </div>
  </div>
</template>
<script lang="ts" setup>
// import getCarInfosByAreaId from '../api/getCarInfosByAreaId.json';

import { ref, reactive, watch, nextTick, toRefs, onMounted } from "vue";
const data = reactive({
  playerOptions: {
    autoplay: true, // 如果true,浏览器准备好时开始回放。
    language: "zh-CN",
    aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
    sources: [
      {
        type: "video/mp4",
        type: "video/ogg",
        type: "application/x-mpegURL",
        src: "", // url地址
      },
    ],
  },
  playerOptions2: {
    autoplay: true, // 如果true,浏览器准备好时开始回放。
    language: "zh-CN",
    aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
    sources: [
      {
        type: "video/mp4",
        type: "video/ogg",
        type: "application/x-mpegURL",
        src: "", // url地址
      },
    ],
  },
  playerOptions3: {
    autoplay: true, // 如果true,浏览器准备好时开始回放。
    language: "zh-CN",
    aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
    sources: [
      {
        type: "video/mp4",
        type: "video/ogg",
        type: "application/x-mpegURL",
        src: "", // url地址
      },
    ],
  },
  playerOptions4: {
    autoplay: true, // 如果true,浏览器准备好时开始回放。
    language: "zh-CN",
    aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
    sources: [
      {
        type: "video/mp4",
        type: "video/ogg",
        type: "application/x-mpegURL",
        src: "", // url地址
      },
    ],
  },
  value1: "",
  initCarAndRoadValue: [],
  bool: false,
});
// ==================初始路段和车牌===================
// 路段
const carInfoValue = () => {
  // let res = [getCarInfosByAreaId];
  // // getCarInfosByAreaId({}).then((res) => {
  // if (res.data.code == 200) {
  //   data.initCarAndRoadValue = res.data.data.road;
  //   // data.value1 = res.data.data.road[0].cars[0].id;
  //   // data.selectClick(res.data.data.road[0].cars[0]);
  // } else {
  //   data.initCarAndRoadValue = [];
  //   data.$Message.error({
  //     content: res.data.message,
  //   });
  // }
  // });
};
const selectClick = (value) => {
  data.bool = true;
  data.value1 = value.id;
  data.playerOptions.sources[0].src = value.leftCameraUrl;
  data.playerOptions2.sources[0].src = value.rightCameraUrl;
  data.playerOptions3.sources[0].src = value.headCameraUrl;
  data.playerOptions4.sources[0].src = value.backCameraUrl;
};
onMounted(() => {});
</script>
<style  lang="less"  scoped>
.videomonitor {
  height: 96%;
  display: flex;
}
.left {
  width: 300px;
  border-right: 1px solid #1a3c5d;
}
.right {
  width: 100%;
  // display: grid;
  // grid-template-columns: 50% 50%;
  // grid-template-rows: 50% 50%;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  height: 100%;
}
.left *,
.left /deep/ .ivu-collapse-content {
  background: transparent;
  color: white;
  border: 1px solid transparent;
}
.left /deep/ .ivu-collapse-header {
  color: white;
}
.left
  /deep/
  .ivu-collapse
  > .ivu-collapse-item.ivu-collapse-item-active
  > .ivu-collapse-header {
  border: 1px solid transparent;
}
.ivu-card-bordered {
}
.ivu-card-body,
.ivu-card-bordered {
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
}
.rightbox {
  width: 40%;
  float: left;
  position: relative;
  color: white;
  p {
    margin: 0 20px;
    position: absolute;
    left: 24px;
    top: 23px;
    z-index: 22;
  }
}
.video-player {
  width: 100%;
  // margin: 20px;
  // margin-left: 28px;
}
.on {
  background: #0f304e;
}
.videoLeft {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
</style>
